import { ChangeEvent, FC, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { StateType } from '@/store'
import { Input, message, Button, Space } from 'antd'
import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons'
import styles from './Layers.module.scss'
import classnames from 'classnames'
import {
  changeComponentTitle,
  changeSelected,
  changeComponentHidden,
  changeComponentLocked,
} from '@/store/componentsReducer'

const Layers: FC = () => {
  const dispatch = useDispatch()
  const { componentList, selectedId } = useSelector((state: StateType) => state.components)

  // 正在修改 title 的组件 id
  const [changingTitleId, setChangingTitleId] = useState<string>('')

  // 点击 title
  const handleTitleClick = (fe_id: string) => {
    const current = componentList.find(item => item.fe_id === fe_id)
    if (!current) return
    if (current.isHidden) return message.info('不能选中隐藏组件')
    if (fe_id !== selectedId) {
      // 选中组件
      dispatch(changeSelected(fe_id))
      // 第一次点击先高亮，第二次点击修改 title
      setChangingTitleId('')
      return
    }
    // 正在修改 title
    setChangingTitleId(fe_id)
  }

  // 修改 title
  const changeTitle = (event: ChangeEvent<HTMLInputElement>) => {
    const newTitle = event.target.value.trim()
    if (!newTitle) return
    if (!selectedId) return
    dispatch(changeComponentTitle({ fe_id: selectedId, title: newTitle }))
  }

  // 切换隐藏/显示
  const handleHidden = (fe_id: string) => {
    const current = componentList.find(item => item.fe_id === fe_id)
    if (!current) return
    if (current.isLocked) return message.info('不能隐藏锁定组件')
    console.log(current)
    dispatch(changeComponentHidden({ fe_id }))
  }

  // 切换锁定/解锁
  const handleLock = (fe_id: string) => {
    const current = componentList.find(item => item.fe_id === fe_id)
    if (!current) return
    if (current.isHidden) return message.info('不能锁定隐藏组件')
    dispatch(changeComponentLocked({ fe_id }))
  }
  return (
    <>
      {componentList.map(item => {
        const { fe_id, title, isHidden, isLocked } = item
        // 拼接 title className
        const titleDefaultClassName = styles.title
        const selectedClassName = styles.selected
        const titleClassName = classnames({
          [titleDefaultClassName]: true,
          [selectedClassName]: fe_id === selectedId,
        })

        return (
          <div key={fe_id} className={styles.wrapper}>
            <div className={titleClassName} onClick={() => handleTitleClick(fe_id!)}>
              {fe_id === changingTitleId && (
                <Input
                  value={title}
                  onChange={changeTitle}
                  onBlur={() => setChangingTitleId('')}
                  onPressEnter={() => setChangingTitleId('')}
                />
              )}
              {fe_id !== changingTitleId && title}
            </div>
            <div className={styles.handler}>
              <Space>
                <Button
                  size="small"
                  shape="circle"
                  className={!isHidden ? styles.btn : ''}
                  icon={<EyeInvisibleOutlined />}
                  type={isHidden ? 'primary' : 'text'}
                  onClick={() => handleHidden(fe_id!)}
                />
                <Button
                  size="small"
                  shape="circle"
                  className={!isLocked ? styles.btn : ''}
                  icon={<LockOutlined />}
                  type={isLocked ? 'primary' : 'text'}
                  onClick={() => handleLock(fe_id!)}
                />
              </Space>
            </div>
          </div>
        )
      })}
    </>
  )
}

export default Layers
